<template>
  <div class="app-container">
    <el-card class="box-card" v-loading="loading">
      <div slot="header" class="clearfix">
        <span>{{ ppt.title }}</span>
        <div class="header-actions">
          <el-button size="mini" type="primary" @click="handleEdit" v-if="canEdit">编辑</el-button>
          <el-button size="mini" @click="goBack">返回列表</el-button>
        </div>
      </div>
      
      <div class="ppt-content">
        <div class="ppt-info">
          <div class="ppt-meta">
            <el-tag type="success">{{ ppt.educationLevelName }}</el-tag>
            <el-tag type="info">{{ ppt.subjectName }}</el-tag>
            <el-tag type="warning" v-if="ppt.schoolName">{{ ppt.schoolName }}</el-tag>
            <el-tag type="warning" v-else>所有学校可见</el-tag>
          </div>
          
          <div class="ppt-author">
            <span>上传者：{{ ppt.userName }}</span>
            <span>上传时间：{{ formatDate(ppt.createTime) }}</span>
          </div>
          
          <div class="ppt-cover" v-if="ppt.coverUrl">
            <img :src="ppt.coverUrl" alt="封面">
          </div>
          
          <div class="ppt-desc">
            <h3>内容描述</h3>
            <div class="content-text" v-html="ppt.description || '<p>暂无描述</p>'"></div>
          </div>
          
          <div class="ppt-file" v-if="ppt.fileUrl">
            <h3>PPT文件</h3>
            <div class="file-actions">
              <el-button type="primary" @click="downloadFile">
                <i class="el-icon-download"></i> 下载PPT
              </el-button>
              <el-button type="success" @click="previewFile" v-if="canPreview">
                <i class="el-icon-view"></i> 在线预览
              </el-button>
            </div>
            
            <div class="file-preview" v-if="showPreview">
              <div class="preview-header">
                <h4>PPT预览</h4>
                <el-button icon="el-icon-close" size="mini" circle @click="closePreview"></el-button>
              </div>
              <iframe :src="previewUrl" width="100%" height="600" frameborder="0"></iframe>
            </div>
          </div>
          
          <div class="ppt-tags" v-if="ppt.tags && ppt.tags.length > 0">
            <h3>标签</h3>
            <el-tag
              v-for="tag in ppt.tags"
              :key="tag"
              size="small"
              class="tag-item"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getPPTDetail } from '@/api/ppt';

export default {
  name: 'PPTDetail',
  data() {
    return {
      ppt: {},
      loading: true,
      showPreview: false,
      previewUrl: ''
    };
  },
  computed: {
    canEdit() {
      return this.$store.getters.isAdmin || 
        (this.$store.getters.userInfo && this.$store.getters.userInfo.id === this.ppt.userId);
    },
    canPreview() {
      // 判断是否支持在线预览
      return this.ppt.fileUrl && (
        this.ppt.fileUrl.toLowerCase().endsWith('.pdf') || 
        this.isPPTOnlineViewable
      );
    },
    isPPTOnlineViewable() {
      // 判断是否有可用的在线预览服务，这里简单判断
      return this.ppt.fileUrl && (
        this.ppt.fileUrl.includes('office.com') || 
        this.ppt.fileUrl.includes('onedrive') || 
        this.ppt.fileUrl.includes('sharepoint')
      );
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      const id = this.$route.params.id;
      if (!id) {
        this.$message.error('参数错误');
        this.goBack();
        return;
      }
      
      this.loading = true;
      getPPTDetail(id)
        .then(response => {
          this.ppt = response.data;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
          this.$message.error('获取PPT详情失败');
          this.goBack();
        });
    },
    handleEdit() {
      this.$router.push(`/ppt-center/edit/${this.ppt.id}`);
    },
    goBack() {
      this.$router.push('/ppt-center');
    },
    downloadFile() {
      if (!this.ppt.fileUrl) {
        this.$message.error('文件不存在');
        return;
      }
      
      // 创建一个临时链接来下载文件
      const link = document.createElement('a');
      link.href = this.ppt.fileUrl;
      link.target = '_blank';
      link.download = `${this.ppt.title}.${this.getFileExtension(this.ppt.fileUrl)}`;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    getFileExtension(url) {
      return url.split('.').pop();
    },
    previewFile() {
      if (!this.canPreview) {
        this.$message.error('该文件不支持在线预览');
        return;
      }
      
      if (this.ppt.fileUrl.toLowerCase().endsWith('.pdf')) {
        this.previewUrl = this.ppt.fileUrl;
      } else {
        // 对于PPT文件，使用Microsoft Office Online预览服务
        // 注意：实际项目中需要根据实际情况调整预览服务
        this.previewUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(this.ppt.fileUrl)}`;
      }
      
      this.showPreview = true;
    },
    closePreview() {
      this.showPreview = false;
    },
    formatDate(date) {
      if (!date) return '';
      const d = new Date(date);
      return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
    }
  }
};
</script>

<style scoped>
.header-actions {
  float: right;
}
.ppt-meta {
  margin-bottom: 15px;
}
.ppt-meta .el-tag {
  margin-right: 10px;
}
.ppt-author {
  margin-bottom: 20px;
  color: #606266;
  font-size: 14px;
}
.ppt-author span {
  margin-right: 20px;
}
.ppt-cover {
  margin-bottom: 20px;
  text-align: center;
}
.ppt-cover img {
  max-width: 100%;
  max-height: 300px;
  object-fit: contain;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}
.ppt-desc {
  margin-bottom: 20px;
}
.content-text {
  line-height: 1.6;
}
.file-actions {
  margin-bottom: 15px;
}
.file-preview {
  margin-top: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  overflow: hidden;
}
.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: #f5f7fa;
  border-bottom: 1px solid #ebeef5;
}
.preview-header h4 {
  margin: 0;
}
.tag-item {
  margin-right: 10px;
  margin-bottom: 10px;
}
</style> 